<template>
  <section>
    <a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
      <!--logo和抽屉-->
      <div class="logo">
        <img src="../../assets/logo-tiny.png" alt="抽屉" id="logo-tiny" @click="showDrawer()"
             :style="{marginBottom: '5px'}"/>
        <a-drawer
            title="我是个抽屉"
            placement="left"
            :closable="true"
            :visible="visible"
            :after-visible-change="afterVisibleChange"
            @close="onClose"
        >
          <h3>2018级计算机科学技术3班</h3>
          <h3>学号：2018324309</h3>
          <h3>姓名：周洵民</h3>
          <a href="https://gitee.com/adanzzz/iss">源代码仓库地址 - 点我去Gitee</a>
        </a-drawer>
      </div>

      <!--中间菜单-->
      <a-menu
          theme="dark"
          mode="horizontal"
          :default-selected-keys="['2']"
          :style="{ lineHeight: '64px' }">
        <!--首页-->
        <a-menu-item @click="clickMenuItem('/home')" key="home">
          首页
        </a-menu-item>

        <!--RSA-->
        <a-menu-item @click="clickMenuItem('/rsa')" key="rsa">
          RSA
        </a-menu-item>

        <!--RC4-->
        <a-menu-item @click="clickMenuItem('/rc4')" key="rc4">
          RC4
        </a-menu-item>

        <!--AES-->
        <!--<a-menu-item @click="clickMenuItem('/aes')" key="aes">
          AES
        </a-menu-item>-->

        <!--DES-->
        <!--<a-menu-item @click="clickMenuItem('/des')" key="des">
          DES
        </a-menu-item>-->

        <!--DSA-->
        <!--<a-menu-item @click="clickMenuItem('/dsa')" key="dsa">
          DSA
        </a-menu-item>-->

        <!--ECDSA-->
        <!--<a-menu-item @click="clickMenuItem('/ecdsa')" key="ecdsa">
          ECDSA
        </a-menu-item>-->

        <!--HMAC-->
        <a-menu-item @click="clickMenuItem('/hmac')" key="hmac">
          HMAC
        </a-menu-item>

        <!--MD5-->
        <a-menu-item @click="clickMenuItem('/md5')" key="md5">
          MD5
        </a-menu-item>

        <!--SHA1-->
        <a-menu-item @click="clickMenuItem('/sha1')" key="sha1">
          SHA-1
        </a-menu-item>

        <!--SHA256-->
        <a-menu-item @click="clickMenuItem('/sha256')" key="sha256">
          SHA-256
        </a-menu-item>

        <!--SHA512-->
        <a-menu-item @click="clickMenuItem('/sha512')" key="sha512">
          SHA-512
        </a-menu-item>

        <!--其他-->
        <!--<a-menu-item @click="clickMenuItem('/other')" key="other">
          乱七八糟
        </a-menu-item>-->
      </a-menu>
    </a-layout-header>
  </section>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      visible: false
    }
  },
  methods: {
    // 抽屉状态切换后触发
    afterVisibleChange(val) {
      console.log('visible', val);
    },
    // 显示抽屉
    showDrawer() {
      this.visible = true;
    },
    // 关闭抽屉
    onClose() {
      this.visible = false;
    },
    // 菜单项点击事件
    clickMenuItem(path) {
      this.$router.push(path)
          .catch(err => {
            console.error(err)
            this.$message.error('组件切换失败, 请重试')
          })
    }
  }
}
</script>

<style scoped>
#components-layout-fixed .logo {
  width: 120px;
  height: 64px;
  /*background: rgba(255, 255, 255, 0.2);*/
  /*margin: 16px 24px 16px 0;*/
  float: left;
}
</style>
